<template>
  <div class='box'>
    <button class='my-btn' :class='btnClassObj' @click='fn'>
      <slot></slot>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    // 颜色
    type: {
      type: String,
      defualt: ' '
    },
    // 尺寸
    size: {
      type: String,
      default: ''
    },
    // 圆角
    round: {
        type: String,
        default: 'round'
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false
    },
    // 100%
    block: {
      type: String,
      default: ''
    }
  },
  computed: {
    btnClassObj() {
      return {
        // 颜色
        'my-btn-primary': this.type === 'primary',
        'my-btn-info': this.type === 'info',
        'my-btn-warning': this.type === 'warning',
        // 尺寸
        'my-btn-large': this.size === 'large', // 大
        'my-btn-medium': this.size === 'medium', // 默认
        'my-btn-small': this.size === 'small', // 小
        // 圆角
        'is-round': this.round === '', // 如果标签上有round属性且值为空那么使用该样式
        // disabled
        'is-disabled': this.disabled === true,
        // 100%
        'is-block': this.block === 'block'
      };
    }
  },
  methods: {
      fn() {
          // 传给父组件
          this.$emit('ClickBtn')
      }
  }
};
</script>

<style lang='scss'>
.my-btn {
  margin-left: 10px;
  border-radius: 4px;
  border: none;
  border: 1px solid #ccc;
  background-color: #fff;
  outline: none;
  color: #000;
  width: 98px;
  height: 40px;
  margin-left: 10px;
  margin-bottom: 10px;
}
// 颜色
.my-btn-primary {
  background-color: #07c160;
  color: #ffffff;
}
.my-btn-info {
  background: #1989fa;
  color: #ffffff;
}
.my-btn-warning {
  background-color: #ee0a24;
  color: #ffffff;
}

// 尺寸
.my-btn-large {
  width: 120px;
  height: 45px;
  margin-left: 10px;
}
.my-btn-medium {
  width: 98px;
  height: 40px;
  margin-left: 10px;
}
.my-btn-small {
  width: 68px;
  height: 30px;
  margin-left: 10px;
}

// 圆角
.is-round{
    border-radius: 20px;
}
.is-disabled{
  opacity: 0.6;
}
.is-disabled:hover{
  cursor:not-allowed;
}
// 100%
.is-block{
  width: 100%;
  height: 50px;
}
</style>
